// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/styles/ui-variables.less
// for a full listing of what's available.
@import "ui-variables";

.exporter-view {
  @bg: @base-background-color;

  padding: 16px;

  h4 {
    margin-bottom: 24px;
  }

  .splitter {
    width: 100%;
    height: 1px;
    margin-bottom: 16px;
    // border-bottom-style: dotted;
    background-color: contrast(@bg, lighten(@bg, 4%), darken(@bg, 4%));
  }

  .clearfix:after {
   content: " ";
   display: block;
   height: 0;
   clear: both;
  }

  .document-type-div {
    margin-bottom: 16px;

    div {
      width: 64px;
      height: 24px;
      text-align: left;
      float: left;
      padding-left: 6px;
      font-size: 12px;
      line-height: 24px;
      border-left: 4px solid contrast(@bg, lighten(@bg, 4%), darken(@bg, 4%));

      &:hover {
        background-color: lighten(@bg, 10%);
        cursor: pointer;
      }

      &.selected {
        border-left-color: #2F94BD;
        font-weight: 600;
        background-color: lighten(@bg, 20%);
      }
    }

    .document-phantomjs {
      width: 100px;
    }
  }

  .button-group {
    margin-top: 24px;

    .close-btn {
      margin-right: 16px;
    }

    .export-btn {
      background-image: linear-gradient(#2F94BD, #2790BB);
      color: #fff;
      border: none;

      &:hover {
        background-image: linear-gradient(#53B0D6, #4195B7);
      }
    }
  }

  input[type="checkbox"] {
    margin-left: 12px;
  }

  select, .image-quality-input {
    background-color: darken(@bg, 4%);
    border-color: lighten(@bg, 10%);
    margin: 0 6px;
  }
}
